<template>
  <div class="develop-setting-view">

    <el-dialog
        v-model="dialogVisible"
        :before-close="handleClose"
        title="设置开发信息"
        width="500px"
    >

      <el-form
          ref="ruleForm"
          :model="formData"
          :rules="rules"
          class="demo-ruleForm"
          label-width="140px"
      >
        <el-form-item
            label="营销体量"
            prop="salesVolume"
        >
          <el-select
              v-model="formData.salesVolume"
              placeholder="请选择营销体量"
              style="width: 100%"
          >
            <el-option
                v-for="item in sellOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
            label="开发期限截止日期"
            prop="date"
        >
          <date-picker
              v-model:date="formData.date"
              :disabled-date="disabledDate"
              placeholder="请选择截止日期"
              @change="dateChange"
          />
        </el-form-item>

        <el-form-item
            label="开发保证金"
            prop="devEarnestMoney"
        >
          <el-input
              v-model.number="formData.devEarnestMoney"
              oninput="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入开发保证金"
              @blur="exploitBlur"
          />
        </el-form-item>

        <el-form-item label="最低销量">

          <!--                    <div class="specail-input">-->
          <!--                        <el-input v-model="formData.minSale" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入最低销量">-->
          <!--                            <template #append>-->
          <!--                                <el-select v-model="formData.minSaleUnit" placeholder="请选择" @change="unitChange">-->
          <!--                                    <el-option-->
          <!--                                            v-for="item in options"-->
          <!--                                            :key="item.value"-->
          <!--                                            :label="item.label"-->
          <!--                                            :value="item.value"-->
          <!--                                    >-->
          <!--                                    </el-option>-->
          <!--                                </el-select>-->
          <!--                            </template>-->
          <!--                        </el-input>-->

          <!--                    </div>-->

          <el-input
              v-model.number="formData.minSale"
              oninput="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入最低销量"
          >
            <template #append>
              <span
                  v-if="unit"
                  style="margin-right: 10px"
              >{{ getLabel('sell_unit', unit) }}/</span>
              <el-select
                  v-model="formData.minSaleUnit"
                  placeholder=""
                  style="width: 80px"
              >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </template>
          </el-input>

        </el-form-item>

        <el-form-item label="销量保证金">

          <el-input
              v-model.number="formData.sellEarnestMoney"
              clearable
              oninput="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入销量保证金"
              @blur="salesPriceBlur"
          />

        </el-form-item>

        <el-form-item label="其他说明">

          <el-input
              v-model="formData.remark"
              clearable
              placeholder="请输入其他说明"
          />

        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button
              type="primary"
              @click="dialogConfirm"
          >确定
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {crmStore} from '@CRM/store'
import {defineComponent, reactive, ref} from 'vue'

export default defineComponent({
  name: 'DevelopSettingDialog',
  props: {
    unit: {
      type: String,
      default: '',
    },
  },
  setup(props, {emit}) {
    var ruleForm = ref(null)
    var dialogVisible = ref(false)

    const options =
        crmStore.getters['dictionary/getDictionary']['sell_num_unit']
    const sellOptions =
        crmStore.getters['dictionary/getDictionary']['sales_volume']

    const rules = ref({
      name: [
        {
          required: true,
          message: '请输入终端名称',
          trigger: 'change',
        },
      ],
      devEarnestMoney: [
        {
          required: true,
          message: '请输入开发保证金',
          trigger: 'blur',
        },
      ],
      date: [
        {
          type: 'date',
          required: true,
          message: '请选择结束日期',
          trigger: 'change',
        },
      ],
      salesVolume: [
        {
          required: true,
          message: '请选择营销体量',
          trigger: 'change',
        },
      ],
    })

    var formData = reactive({
      name: '',
      area: '',
      date: '',
      expireTime: '',
      devEarnestMoney: '',
      exploitPrice: '',
      minSale: '',
      minSaleUnit: '1',
      unitStr: '',
      sellEarnestMoney: '',
      salesStr: '',
      remark: '',
      salesVolume: '',
    })

    const disabledDate = (time) => {
      return !(time.getTime() > Date.now())
    }

    const dateChange = () => {
      if (formData.date) {
        formData.expireTime = formData.date
      }
    }

    const exploitBlur = () => {
      if (formData.devEarnestMoney) {
        formData.exploitPrice = Number(formData.devEarnestMoney)
      }
    }

    const salesPriceBlur = () => {
      if (formData.sellEarnestMoney) {
        formData.salesStr = formData.sellEarnestMoney
      }
    }

    const unitChange = () => {
      switch (formData.minSaleUnit) {
        case '1':
          formData.unitStr = '年'
          break
        case '2':
          formData.unitStr = '半年'
          break
        case '3':
          formData.unitStr = '季度'
          break
      }
    }

    const openDialog = () => {
      dialogVisible.value = true
    }

    const handleClose = () => {
      formData.salesVolume = ''
      formData.minSale = ''
      formData.sellEarnestMoney = ''
      formData.remark = ''
      ruleForm.value.resetFields()
      setTimeout(() => {
        ruleForm.value.clearValidate()
        dialogVisible.value = false
      }, 100)
    }

    const dialogConfirm = () => {
      ruleForm.value.validate((val) => {
        if (val) {
          emit('confirm', formData)
          handleClose()
        }
      })
    }

    return {
      ruleForm,
      options,
      rules,
      formData,
      dialogVisible,
      sellOptions,

      openDialog,
      dateChange,
      handleClose,
      dialogConfirm,
      salesPriceBlur,
      unitChange,
      exploitBlur,
      disabledDate,
    }
  },
})
</script>

<style lang="scss">
.develop-setting-view {
  .el-input {
    width: 100%;
  }

  .specail-input {
    display: flex;

    .el-input__inner {
      border-radius: 5px 0 0 5px;
    }

    .el-select {
      width: 110px;

      .el-input__inner {
        border-radius: 0 5px 5px 0;
        border-left: 0;
      }
    }
  }
}
</style>
